<template>
	<view>
		<!-- getone  获取一条数据  返回就是一个对象， 不设置 返回就是一个数组 -->
		<unicloud-db :page-size="3" v-slot:default="{data, loading}" v-if="_id && where" collection="goodList" :where="where"
			:getone="true">
			<view v-if="loading">数据加载中...</view>
			<view v-else class="docterInfo">
				<view class="left">
					<image :src="data.image" mode=""></image>
					<view class="title">{{data.title}}</view>
				</view>
				<view class="right">
					<!-- v-if  v-else 判断即可  两个样式 -->
					<button style="background-color: #ccc;" v-if="isFlag" @click="isFlag = !isFlag">取消关注</button>
					<button style="background-color: green;" v-else @click="isFlag = !isFlag">关注</button>
				</view>
			</view>
		</unicloud-db>
		<!--  -->
		<uni-section title="问诊方式" type="line">
			<view class="message">
				<view class="item">
					<uni-icons type="color" size="30"></uni-icons>
					<text class="con">图文咨询</text>
					<text class="price">20元/次</text>
				</view>
				<view class="item">
					<uni-icons type="color" size="30"></uni-icons>
					<text class="con">私人医生</text>
					<text class="price">100元/次</text>
				</view>
				<view class="item">
					<uni-icons type="color" size="30"></uni-icons>
					<text class="con">视损咨询</text>
					<text class="price">99元/次</text>
				</view>
			</view>
		</uni-section>

		<uni-section title="患者评价" type="line">
			<unicloud-db v-slot:default="{ data, loading }" collection="messageList">
				<view v-if="loading"></view>
				<view v-else>
					<view class="message-list" v-for="(item, index) in data" :key="index">
						<div class="top">
							<view class="">
								<image :src="item.image" mode=""></image>
								<textarea name="" id="" cols="30" rows="10">{{item.nickname}}</textarea>
							</view>
							<uni-rate size="18" :value="item.score" />
						</div>
						<view class="con">
							<view class="content">
								{{item.content}}
							</view>
							<view class="datetime">
								{{item.createTime}}
							</view>
						</view>
					</view>
				</view>
			</unicloud-db>
		</uni-section>

	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue';
	// 关注的开关变量  true 关注  false 没有关注
	const isFlag = ref(false)
	const _id = ref('')
	const where = ref('')
	onLoad(options => {
		where.value = `_id == '${options._id}'`
		_id.value = options._id
	})
</script>

<style lang="scss" scoped>
	.docterInfo {
		display: flex;

		.left {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 300rpx;
				height: 300rpx;
				border-radius: 50%;
			}
		}

		.right {
			flex: 1;
			display: flex;
			align-items: center;
		}
	}

	.message {
		display: flex;

		.item {
			width: 25%;
			margin: 60rpx 4%;
			display: flex;
			flex-direction: column;
			min-height: 150rpx;
			align-items: center;

			.price {
				color: red;
			}

			&:nth-child(1) {
				border: 1px solid green;
			}

			&:nth-child(2) {
				border: 1px solid gray;
			}

			&:nth-child(3) {
				background-color: #ccc;
			}
		}
	}
</style>